
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../before/css/common.css" rel="stylesheet" tyle="text/css" />
    <link href="../before/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/before/js/jquery-3.1.1.min.js"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>
    <title>用户注册</title>
</head>
<body>
<!--顶部样式-->
<div class="common_top">
    <div class="Narrow">
        <div class=" left logo"><a href="/stageregist/toIndex.do"><img src="/before/images/logo1.png" /></a></div>
        <!--可修改图层-->
        <div class=" left festival"><a href="#"><img src="/before/images/logo_gou.png" /></a></div>
        <!--电话图层-->
        <div class="phone">全国服务热线：<em>400-345-5633</em></div>
    </div>
</div>
<div class="rgister Narrow">
    <div class="Sign">
        <div class="AD_img"><img  src="../before/images/adbg_03.png" /></div>
        <div class="rgister-form">
            <div class="rgister-name"><span class="name">用户注册</span> <span class="English">REGISTER</span></div>
            <form id="form1" name="form1" method="post" action="/stageregist/CustomRegist.do" onsubmit="return CheckAll()">
                <div class="form clearfix">
                    <div class="item"><label class="rgister-label">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</label><input name="name" type="text" id="name" class="text" /><span id="check1" style="color:green;"><b>*</b></span></div>
                    <div class="item"><label class="rgister-label" >密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input name="pass" id="pass" type="password"  class="text" p/><span id="check2" style="color:green;"><b>*</b></span></div>

                    <div class="item"><label class="rgister-label " >确认密码：</label><input id="rpass" type="password"  class="text" /><span id="check3" style="color:green;"><b>*</b></span></div>
                    <div class="item"><label class="rgister-label" >电子邮箱：</label><input name="email" id="email" type="text"  class="text" /><span id="check4" style="color:green;"><b>*</b></span></div>
                    <div class="item"><label class="rgister-label" >真实姓名：</label><input name="realName" id="realName" type="text"  class="text" /><span id="check5" style="color:green;"><b>*</b></span></div>
                    <div class="item "><label  class="rgister-label ">手&nbsp;机&nbsp;号：</label><input name="phone" id="phone" type="text"  class="Recommend_text" /><span id="check6" style="color:green;"><b>*</b></span></div>
                    <div class="item "><label  class="rgister-label ">验&nbsp;证&nbsp;码：</label><input name="sms" id="sms" type="text"  class="Recommend_text" /><span id="check7" style="color:green;"><b>*</b></span><span id="yanzhengma" style=" font-size: 17px;color:#FFF;background:#ffa800;">获取验证码</span></div>

                    <div class="item "><label  class="rgister-label ">性别&nbsp;：</label><select name="sex" id="sex"><option value="0">不详</option><option value="1">男</option><option value="2">女</option></select></div>
                </div>
                <div class="rgister-btn">
                    <input type="submit" class="btn_rgister"　id="reg"/>
                </div>
                <div class="Note"><span class="login_link">已是会员<a href="/stageregist/toLogin.do">请登录</a></span></div>
            </form>
        </div>
    </div>
</div>
<!--底部样式-->
<div class="bottom_footer">
    <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">商家入驻</a> | <a href="#">法律申明</a> | <a href="#">友情链接</a>  </p>
    <p>Copyright©2018 郑科院叮叮网络科技有限公司.All Rights Reserved. </p>
    <p>豫ICP备09150084号</p>
</div>
</body>
</html>
<script>


    $("#name").blur(function () {
        checkName();
    })

    //检查用户是否存在
    function checkName() {
        $("#check1").html("");
        var name = $("#name").val();
        if (name == "") {
            $("#check1").html("<b>*</b>");
            return false;
        } else {
            $.ajax({
                type: "post",
                url: "/stageregist/CheckName.do",
                data: {"name": name},
                success: function (result) {
                    if (result == "true") {
                        $("#check1").html("<b>已存在<b>");
                    } else {
                        $("#check1").html("正确");
                    }
                }
            })
        }
    }


    //检验密码是否一致
    $("#rpass").blur(function () {
        checkRPass();
    })

    function checkRPass() {
        $("#check3").html("");
        var pass = $("#pass").val();
        var rpass = $("#rpass").val();
        if(rpass==""){
            $("#check3").html("<b>*<b>");
            return false;
        }else{
            if (pass != rpass) {
                $("#check3").html("<b>*<b>");
                return false;
            } else {
                $("#check3").html("正确");
                return true;
            }
        }
    }

    //检验密码是否为空
    $("#pass").blur(function () {
        checkPass();
    })

    function checkPass() {
        $("#check2").html("");
        var pass = $("#pass").val();
        if (pass == "") {
            $("#check2").html("<b>*<b>");
            return false;
        } else {
            $("#check2").html("正确");
            return true;
        }
    }

    //检查电子邮箱
    $("#email").blur(function () {
        checkEmail();
    })

    function checkEmail() {
        $("#check4").html("");
        var email = $("#email").val();
        var role = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!role.test(email)) {
            $("#check4").html("<b>*</b>");
            return false;
        } else {
            $("#check4").html("正确");
            return true;
        }
    }

    //检查真实姓名
    $("#realName").blur(function () {
        checkRealName();
    })

    function checkRealName() {
        $("#check5").html("");
        var realName = $("#realName").val();
        var role = /^[\u4e00-\u9fa5]*$/;
        if (realName == "") {
            $("#check5").html("<b>*</b>");
        } else {
            if (!role.test(realName)) {
                $("#check5").html("<b>*</b>");
                return false;
            } else {
                $("#check5").html("正确");
                return true;
            }
        }
    }


    //检查手机号
    $("#phone").blur(function () {
        checkPhone();
    })

    function checkPhone() {
        $("#check6").html("");
        var phone = $("#phone").val();
        var role = /^1(3|4|5|7|8)\d{9}$/;
        if (role.test(phone)) {
            $("#check6").html("正确");
            return true;
        } else {
            $("#check6").html("<b>*<b>");
            return false;
        }
    }

    var code = "";//定义变量接收信息
    //获取手机验证码
    $("#yanzhengma").click(function () {
        var role = /^1(3|4|5|7|8)\d{9}$/;
        var phone = $("#phone").val();
        //alert(phone);
        if (role.test(phone)) {
            //利用ajax将我们获取到的手机号发送到后台.
            $.ajax({
                type: "post",
                url: "/stageregist/sendSMS.do",
                data: {"phone": phone},
                //dataType:"json",
                success: function (result) {
                    code = result;
                }
            })
        }
    })


    //输入验证码时检验是否正确
    $("#sms").blur(function () {
        CheckCode();
    })

    function CheckCode(){
        var sms = $("#sms").val();
        if (sms == "") {
            $("#check7").html("<b>*<b>");
            return false;
        } else {
            if (code == sms) {
                $("#check7").html("正确");
                return true;
            } else {
                $("#check7").html("<b>*<b>");
                return false;
            }
        }
    }


    function CheckAll(){

        var name=$("#check1").html();
        if(name=="正确"){
            if(checkRPass()&&checkEmail()&&checkRealName()&&checkPhone()&&CheckCode()){
                layer.msg("注册成功");
                return true;
            }else{
                alert("请根据提示修改填写错误选项");
                return false;
            }
        }else {
            alert("请根据提示修改填写错误选项");
            return false;
        }
    }
</script>